<template>
  <div class="group-friend-add-main">
    <div class="nav-back-header">
      <div class="back-title">
        <div class="back-button">
          <img class="back-cover" src="@/assets/images/arrow-left.png" @click="onNavigationBack()" />
        </div>
        <strong>新建手动任务（按群选择群成员）</strong>
      </div>
    </div>
    <div class="add-group-friend-wrap">
      <div class="add-group-friend-content">
        <div class="add-group-friend-filterbox">
          <div class="head">
            <span class="title">排除条件</span>
            <a class="card-option" v-if="isShow" @click="onChangeFilterBox">收起<i class="el-icon-arrow-down"
                style="font-weight: 500;font-size: 18px;" /></a>
            <a class="card-option" v-else @click="onChangeFilterBox">展开<i class="el-icon-arrow-up"
                style="font-weight: 500;font-size: 18px;" /></a>
          </div>
          <div class="filter-wrap" v-show="isShow">
            <div class="filter-title">
              排除身份性别
            </div>
            <div class="checks">
              <el-checkbox-group v-model="filter.identity">
                <el-checkbox :label="item.id" v-for="(item, index) in identityList" :key="index">
                  <span class="check-item">{{ item.name }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="input-filter">
              <div class="n-keyword">
                <span>排除添加次数</span>
                <div>
                  <el-input v-model="filter.count" size="small" placeholder="不限" style="width: 160px;" />
                  <span> 次及以上</span>
                </div>
              </div>
              <div class="n-keyword">
                <span>排除上次添加时间</span>
                <div>
                  <el-select v-model="filter.date" placeholder="请选择" style="width: 140px;">
                    <el-option v-for="item in dates" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="n-keyword">
                <span>
                  昵称关键词
                  <el-tooltip class="item" effect="dark" content="昵称包含关键词即被剔除" placement="top-start">
                    <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                  </el-tooltip>
                </span>
                <div>
                  <AddKeyword v-model="filter.nickTags" placeholder="可输入多个，按Enter确认" class="mt-13" />
                  <!-- <el-input v-model="filter.count" placeholder="可输入多个，按Enter确认" size="small" style="width: 290px;" /> -->
                </div>
              </div>
              <div class="n-keyword">
                <span>
                  企业名称关键词
                  <el-tooltip class="item" effect="dark" content="企业名称包含关键词即被剔除" placement="top-start">
                    <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                  </el-tooltip>
                </span>
                <div>
                  <AddKeyword v-model="filter.qynickTags" placeholder="可输入多个，按Enter确认" class="mt-13" />
                  <!-- <el-input v-model="filter.count" size="small" placeholder="可输入多个，按Enter确认" style="width: 290px;" /> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="add-group-friend-message">
          <div class="item-label">验证消息：</div>
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea" maxlength="50" show-word-limit>
          </el-input>
        </div>
        <div class="alert-info">
          <div>1、选择的客户群中符合设置条件的群成员会全部依次创建添加任务；</div> 
          <div>2、由于数据量较多，创建添加任务需要时间，可在待发送列表查看创建情况，请勿重复创建；</div> 
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">选择客户群</div>
            <span class="tips">
              当前已选 <a>0</a> 个群
            </span>
          </div>
          <div class="card-content">
            <div class="add-group-friend-left">
              <div class="header">
                <div class="title">筛选</div>
                <el-button type="primary" size="mini" plain class="clear-btn">清空条件</el-button>
              </div>
              <div class="add-group-friend-form">
                <client-form ref="clientfrom" :lableType='2' @query='handleQuery' />
                <div class="flexbetween bg_f7f7f7 p-8 mb-12 mt-16">
                  <div class="fw-6 flexcenter">
                    设置排除条件
                    <el-switch
                      v-model="exclude"
                      active-color="#3070ff"
                      inactive-color="#c7c5c5"
                      :active-value="1"
                      :inactive-value="0"
                      class="ml-6"
                    >
                    </el-switch>
                  </div>
                  <div class="c_ff9900">开启后将排除满足以下条件客户群</div>
                </div>
                <client-form v-if="exclude == 1" ref="excludeclientfrom" :lableType='2' @query='handleQuery' />
              </div>
              <!-- <el-form ref="form" :model="form" label-width="120px" class="add-group-friend-form" label-position="top">
                <el-form-item label="群名称：" prop="pass">
                  <div class="flex-rows">
                    <el-select size="small">
                      <el-option v-for="item in keyWords" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <el-input placeholder="可输入多个，按enter确认" v-model="input3" size="small">
                      <el-button slot="append" icon="el-icon-plus" size="small"></el-button>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item label="标签：" prop="pass">
                  <div class="flex-rows">
                    <el-select size="small">
                      <el-option v-for="item in keyTags" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <MultipleSelect size="small" placeholder='智能标签' :receiverNameOpt='lableOpt' />
                  </div>
                </el-form-item>
                <el-form-item label="其他：" prop="pass">
                  <div class="flex-rows">
                    <el-input value="是否群主/管理" readonly size="small" />
                    <el-select size="small" placeholder="请选择">
                      <el-option label="群主/群管理员" :value="1"></el-option>
                      <el-option label="群主" :value="2"></el-option>
                      <el-option label="群成员" :value="3"></el-option>
                    </el-select>
                  </div>
                  <div class="flex-rows">
                    <el-input value="群成员数" readonly size="small" />
                    <el-dropdown placement="bottom">
                      <el-input class="search-input" size="small" placeholder="请选择" suffix-icon="el-icon-arrow-down"/>
                      <el-dropdown-menu slot="dropdown">
                        <div class="threshold-content">
                          <div class="input-rows">
                            <el-input placeholder="最小值" style="width: 88px"/>
                            <span class="delimiter">~</span>
                            <el-input placeholder="最大值" style="width: 88px"/>
                          </div>
                          <el-button class="submit-button" type="primary" size="small">确定</el-button>
                        </div>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-form-item>
                <div class="seting">
                    <div class="seting-left">设置排除条件
                        <el-switch v-model="value" active-color="#13ce66"></el-switch>
                    </div>
                    <span class="seting-right">开启后将排除满足以下条件客户群</span>
                </div>
              </el-form> -->
            </div>
            <div class="add-group-friend-right">
              <el-table ref="addGroupTbale" :data="dataSource" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="selection" width="70"></el-table-column>
                <el-table-column property="mobile" label="全选本页">
                  <template slot-scope="scope">
                    <div class="company-account">
                      <img class="account-cover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
                      <div class="account-info">
                        <div class="name">闵雨微</div>
                        <div class="context">
                          <span class="tag">群主</span>
                          <span>群成员：1</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="right">
                  <template slot="header" slot-scope="scope">
                    <el-button type="primary" size="mini" plain>全选所有</el-button>
                  </template>
                </el-table-column>
                <template slot="empty">
                  <TableEmpty />
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="add-group-friend-footer">
      <el-button size="small" type="primary">确定创建任务</el-button>
      <el-button size="small">取消创建</el-button>
    </div>
  </div>
</template>
<script>
import MultipleSelect from '@/components/MultipleSelect'
import AddKeyword from "@/components/AddKeyword/index2.vue";
import ClientForm from "@/components/UserGroupComp/components/ClientForm.vue";
export default {
  data() {
    return {
      filter: {
        identity: [],
        nickTags:[],
        qynickTags:[]
      },
      isShow: true,
      drawerVisible: false,
      textarea: '',
      dataSource: [{id: 1}],
      groupTags: [],
      exclude:0,
      groupList: [
        {id: 1, name: '群主/管理员'},
        {id: 2, name: '群主'},
        {id: 3, name: '群成员'},
      ],
      identityList: [
        { id: 1, name: '群主' },
        { id: 2, name: '群管理员' },
        { id: 3, name: '企微成员' },
        { id: 4, name: '黑名单' },
        { id: 5, name: '白名单' },
        { id: 6, name: '男性' },
        { id: 7, name: '女性' },
        { id: 8, name: '未知性别' }
      ],
      dates: [
        { id: 1, name: '3天内' },
        { id: 1, name: '5天内' },
        { id: 1, name: '7天内' },
      ],
      keyWords: [
        { id: 1, name: '含任意关键词' },
        { id: 2, name: '含所有关键词' },
      ],
      keyTags: [
        { id: 1, name: '含任意标签' },
        { id: 2, name: '含所有标签' },
        { id: 3, name: '未打任何标签' },
      ],
      lableOpt: [
        { value: 1, label: '客户等级', children: ['一般', '重要', '核心'] },
        { value: 2, label: '客户等级2', children: ['一般2', '重要2', '核心2'] }
      ],
      leader: [
        { id: 1, name: '群主/群管理员' },
        { id: 2, name: '群主' },
        { id: 3, name: '群成员' },
      ],
    }
  },
  components: {
    MultipleSelect,
    AddKeyword,
    ClientForm
  },
  methods: {
    onNavigationBack() {
      this.$router.go(-1);
    },
    onChangeFilterBox() {
      this.isShow = !this.isShow
    },
    onSearchGroup() {
      this.drawerVisible = !this.drawerVisible
    },

    handleQuery(){

    }
  },
}
</script>
<style lang="scss" scoped>
.group-friend-add-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;

  .nav-back-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;

    .back-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;

      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-right: 12px;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        cursor: pointer;

        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .add-group-friend-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 20px 20px 100px;

    .add-group-friend-content {
      display: flex;
      flex-direction: column;
      width: 1200px;

      .add-group-friend-filterbox {
        background-color: #fff;
        margin-bottom: 16px;
        border-radius: 4px;

        .head {
          display: flex;
          justify-content: space-between;
          padding: 12px 16px;

          .title {
            font-weight: 600;
            color: rgba(0, 0, 0, .85);
            font-size: 16px;
          }

          .card-option {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #3070ff;
          }
        }

        .filter-wrap {
          padding: 0 16px 10px;

          .filter-title {
            font-size: 12px;
            color: rgba(0, 0, 0, .45);
            margin-bottom: 5px;
          }

          .checks {
            margin-bottom: 20px;

            .check-item {
              font-size: 14px;
              font-weight: 400;
              color: rgba(0, 0, 0, .65);
            }
          }

          .input-filter {
            display: flex;

            .n-keyword {
              margin-right: 32px;

              span {
                color: rgba(0, 0, 0, .45);
                font-size: 12px;
              }

              div {
                margin-top: 8px;
              }
            }
          }
        }
      }
    }

    .add-group-friend-message {
      background-color: #fff;
      margin-bottom: 16px;
      border-radius: 4px;
      padding: 12px;
      display: flex;

      .item-label {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        white-space: nowrap;
        text-align: right;
        padding-top: 4px;
        width: 70px;
      }
    }

    .config-settig-card {
      background: #ffffff;
      flex: 1 1;
      text-align: left;
      text-align: initial;
      color: rgba(0, 0, 0, 0.85);
      border-radius: 4px;
      background: #fff;
      font-size: 14px;
      min-height: 600px;
      overflow: hidden;
      overflow-y: scroll;

      .card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e9e9e9;

        .card-title {
          padding: 16px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
        }

        .tips {
          color: rgba(0, 0, 0, .45);
          font-size: 14px;
          line-height: 22px;
          padding: 16px;

          a {
            color: #3070ff;
            text-decoration: none;
          }
        }
      }

      .card-content {
        font-size: 14px;
        line-height: 22px;
        display: flex;
        min-height: 600px;

        .add-group-friend-left {
          max-height: 600px;
          width: 400px;
          background-color: #fff;
          position: relative;
          overflow-y: auto;
          .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fafafa;
            box-shadow: 0 1px 0 0 #e9e9e9;
            padding: 0 20px;
            height: 40px;
            .title {
              color: rgba(0, 0, 0, .65);
              font-size: 14px;
            }
            .clear-btn {
              width: 68px;
              height: 24px;
              font-size: 13px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .add-group-friend-form {
            padding: 16px 16px;
            ::v-deep .el-form-item {
              margin-bottom: 16px;
            }
            ::v-deep .el-form-item--medium .el-form-item__label {
              line-height: 24px;
              padding: 0 0 6px;
            }
            // .flex-rows {
            //   display: grid;
            //   column-gap: 6px;
            //   grid-template-columns: 126px 233px;
            //   align-items: center;
            //   position: relative;
            // }
            // .seting {
            //   display: flex;
            //   justify-content: space-between;
            //   background: rgb(247, 247, 247);
            //   height: 38px;
            //   margin: 20px 0px 0px;
            //   padding: 8px;
            //   row-gap: 0px;
            //   font-size: 14px;
            //   .seting-right {
            //     color: rgb(255, 153, 0);
            //   }
            // }
          }
        }

        .add-group-friend-right {
          flex: 1 1;
          ::v-deep .el-table .el-table__cell {
            padding: 0 12px !important;
          }
          .company-account {
            display: flex;
            align-items: center;

            .account-cover {
              width: 40px;
              height: 40px;
            }

            .account-info {
              margin-left: 8px;
              padding: 10px 0;
              .name {
                font-size: 14px;
                line-height: 22px;
                color: #222333;
              }

              .context {
                display: flex;
                align-items: center;
                font-size: 12px;
                font-weight: 400;
                gap: 4px;
                .tag {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 12px;
                  color: #fff;
                  width: 36px;
                  height: 20px;
                  background: #3070ff;
                  border-radius: 4px;
                  border: 1px solid #fff;
                }
              }
              .groupNums {
                font-size: 12px;
                color: #888999;
              }
            }

            .accept-account {
              font-size: 14px;
              line-height: 22px;
            }
          }
        }
      }
    }
  }
  .add-group-friend-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
// .e_exclude {
//   margin: 20px 16px;
// }
</style>